<template>
  <div class="option-detail">
    <div class="header" style="display:block;height:3.76rem;width:100%;backgroundSize:100%;position: relative" :style="{backgroundImage: 'url(' +detail.optionCoverUrl+ ')'}">
      <div class="title">{{detail.optionContent}}</div>
    </div>
    <div class="vote">
      <div class="data-display flex-cont">
        <div class="data-item flex">
          <div class="flex-cont">
            <img src="../../images/voteUser.png" alt="" class="vote-user">
            <span>投票数</span>
          </div>
          <div class="num">{{detail.turnout}}</div>
        </div>
        <div class="data-item flex">
          <div class="flex-cont">
            <img src="../../images/currentRank.png" alt="" class="vote-rank">
            <span>当前排名</span>
          </div>
          <div class="num">{{detail.ranking}}</div>
        </div>
      </div>
      <div class="echain-detail flex-box-align">
        <span class="flex">
          区块链接地址：{{detail.optionAddress}}
        </span>
        <button class="btn-copy" type="button"
                v-clipboard:copy.stop="detail.optionAddress"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">复制</button>
      </div>
    </div>
    <div style="height: .2rem;"></div>
    <div class="introduce">
      <div>
        {{detail.optionIntroduction}}
      </div>
      <div class="btn-get" :class="{noClick: isAsseted == 'y'}" @click="handleGet">领取投票代币</div>
      <div class="btn-option" :class="{noClick: detail.isVoted == 'y'}" @click="handleClickVote">投票</div>
    </div>

  </div>
</template>

<script>
  import { Search } from 'vux'
  import {parseUrlParams} from "../../util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Search
    },
    data () {
      return {
        voteId: "",
        detail: {},
        isAsseted: "",
        url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        results: [],
        value: "",
        active: "brief",
      }
    },
    mounted(){
      this.detail = JSON.parse(decodeURIComponent(parseUrlParams("json")))
    },
    methods:{
      getDetail() {
        common.requestAjax(CONSTANT.URL.VOTE.VOTEDETAIL, {}, {voteId: this.detail.voteId}, (res) => {
          if (res.status == 200) {
            this.isAsseted = res.data.bussData.isAsseted;
          }
        })
      },
      handleGet() {
        common.requestAjax(CONSTANT.URL.VOTEOPTION.OPTION, {}, {voteId: this.detail.voteId}, (res) => {
          if (res.status == 200) {
            this.isAsseted = "y"
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
          if(res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickVote() {
        common.requestAjax(CONSTANT.URL.VOTEOPTION.VOTE, {}, {voteId: this.detail.voteId, optionId: this.detail.optionId}, (res) => {
          if (res.status == 200) {
            this.detail.isVoted = "y";
            this.detail.turnout++
            this.getDetail()
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
          if (res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickNav(val) {
        this.active = val
      },
      resultClick (item) {
//        this.$router.push({path: "/inquiry/detail", query: {id: item.id}})
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? this.getResult1(this.value) : []
      },
      getResult1(val) {
        let rs = []
        for (let i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].patientUserCoreDTO.trueName.indexOf(val) != -1) {
            rs.push({
              title: this.dataList[i].patientUserCoreDTO.trueName,
              id: this.dataList[i].id,
            })
          }
        }
        return rs
      },
      onSubmit () {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      onCopy(val) {
        this.$vux.alert.show({
          title: "提示",
          content: "复制成功",
          onShow () {

          },
          onHide () {
          }
        })
        event.cancelBubble = true;
      },
      onError() {

      }
    },
  }
</script>

<style lang="scss">
  .option-detail {
    height: 100%;
    background-color: #f2f2f2;
    font-size: .32rem;
    .btn-copy {
      display: inline-block;
      background-color: #198AE7;
      color: #fff;
      font-size: .26rem;
      padding: 2px .3rem;
      border-radius: .1rem;
      margin-left: .3rem;
      border: none;
    }
    .noClick {
      pointer-events: none;
      background-color: #ccc!important;
    }
    .btn-get {
      /*padding: .16rem .24rem;*/
      white-space: nowrap;
      background-color: #198AE7;
      text-align: center;
      color: #fff;
      font-size: .28rem;
      border-radius: .1rem;
      /*margin-right: .3rem;*/
      width: 2.8rem;
      height: .78rem;
      line-height: .78rem;
      margin: 0 auto;
    }
    .header {
      .title {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: .6rem;
        height: .6rem;
        text-align: center;
        font-size: .34rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
      }
    }
    .vote {
      padding: .25rem .3rem .37rem .3rem;
      background-color: #fff;
      .data-display {
        margin-bottom: .45rem;
        .num {
          color: #D82121;
        }
        .data-item {
          font-size: .32rem;
          text-align: center;
          img {
            vertical-align: middle;
            margin-right: .15rem;
          }
          .vote-user {
            width: .27rem;
            height: .29rem;
          }
          .vote-rank {
            width: .32rem;
            height: .3rem;
          }
          .vote-num {
            width: .41rem;
            height: .28rem;
          }
          .watch-num {
            width: .3rem;
            height: .2rem;
          }
        }
      }
      .echain-detail {
        padding: 0 .47rem;
        word-break: break-all;
        font-size: .28rem;
        color: #333;
        span {
          word-break: break-all;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
          overflow:hidden;
          text-overflow:ellipsis;
        }
      }
    }

    .introduce {
      background-color: #fff;
      padding: 0 .5rem;
      padding-bottom: .86rem;
      div:nth-child(1) {
        text-align: justify;
        word-break: break-all;
        text-indent: .5rem;
        line-height: .48rem;
        padding: .36rem .24rem;
        color: #333;
      }
      .btn-option {
        width: 2.8rem;
        height: .78rem;
        line-height: .78rem;
        text-align: center;
        background-color: #198AE7;
        color: #fff;
        /*margin: 1.02rem auto 0 auto;*/
        margin: .5rem auto 0 auto;
        border-radius: .1rem;
      }
      .btn-option.noClick {
        pointer-events: none;
        background-color: #ccc;
      }
    }
    .detail-nav-list {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      li {
        height: .98rem;
        line-height: .98rem;
        text-align: center;
        flex: 1;
        -webkit-flex: 1;
        color: #fff;
        background-color: #000;
        &:active {
          opacity: .6;
        }
      }
      li.active {
        color: #333;
        background-color: #fff;
      }
    }
  }
</style>
